<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty zhiBiao" v-if="showBlock == 1">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "收起" : "展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="被考核人">
                <el-input
                  v-model="dataForm.bkhName"
                  placeholder="被考核人"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人编号">
                <el-input
                  v-model="dataForm.bkhNumber"
                  placeholder="被考核人编号"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="考核人职务">
                <el-input
                  v-model="dataForm.khrZhiwu"
                  placeholder="考核人职务"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <el-date-picker
                  v-model="dataForm.value1"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <span class="mg-0-10">至</span>
                <el-date-picker
                  v-model="dataForm.value2"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div>
          <el-radio-group v-model="tabType" @change="changeRadio">
            <el-radio-button label="1">任务指标</el-radio-button>
            <el-radio-button label="2">重点任务</el-radio-button>
          </el-radio-group>
          <span style="margin-left: 10px">
            重点任务
            <el-radio v-model="radio" label="1">个人</el-radio>
            <el-radio v-model="radio" label="2">机构</el-radio>
          </span>
          <div style="float: right">
            <!--                    <el-button type="primary">打印</el-button>-->
            <!--                    <el-button type="primary">导出</el-button>-->
            <!--                    <el-button type="primary">任务审核</el-button>-->
            <!--                    <el-button type="primary">任务复用</el-button>-->
            <!--                    <el-button type="primary">批量填报</el-button>-->
            <!--                    <el-button type="primary">批量删除</el-button>-->
            <!-- <el-button type="primary" @click="fanhui">返回</el-button> -->
            <el-button type="primary" @click="fnOpenRenKaoHe">新增#</el-button>
          </div>
        </div>
        <el-table
          style="width: 100%; margin-top: 20px"
          :data="dataList1"
          border
          v-show="tabType == 1"
          v-loading="dataListLoading"
        >
          <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            width="80"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="bkhName"
            header-align="center"
            align="center"
            label="被考核人"
          >
          </el-table-column>
          <el-table-column
            prop="taskName"
            header-align="center"
            align="center"
            label="任务名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="难度系数"
            header-align="center"
            align="center"
          >
            <el-table-column
              prop="zycd"
              header-align="center"
              align="center"
              label="重要程度"
            >
            </el-table-column>
            <el-table-column
              prop="wcnd"
              header-align="center"
              align="center"
              label="完成难度"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="workTarget"
            header-align="center"
            align="center"
            label="工作目标/成效"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="dataProvider"
            header-align="center"
            align="center"
            label="数据提供部门/人"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.tgLx == '2'">{{
                scope.row.targetUserName
              }}</span>
              <span v-else>{{ scope.row.dataProvider }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="providerName"
            header-align="center"
            align="center"
            label="提供人"
          >
          </el-table-column>
          <el-table-column header-align="center" align="center" fixed="right">
            <template slot="header" slot-scope="scope">
              <span
                @click="add()"
                style="font-size: 30px; cursor: pointer"
                class="el-icon-circle-plus"
              ></span>
            </template>
            <template slot-scope="scope">
              <span
                @click="del(scope.row.id)"
                style="font-size: 30px; cursor: pointer"
                class="el-icon-remove"
              ></span>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          style="width: 100%; margin-top: 20px"
          :data="dataList2"
          border
          v-show="tabType == 2"
          v-loading="dataListLoading"
        >
          <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            width="80"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="renwuName"
            header-align="center"
            align="center"
            label="重点任务名称"
          >
          </el-table-column>
          <el-table-column
            prop="bkhName"
            header-align="center"
            align="center"
            label="被考核人"
          >
          </el-table-column>
          <el-table-column
            prop="khrZhiwu"
            header-align="center"
            align="center"
            label="考核人职务"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                size="small"
                @click="fnOpenRenKaoHeForEdit(scope.row)"
                >查看#
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="70%" center>
          <el-row :gutter="40">
            <el-col :xs="24" :sm="24" :md="12">
              <div>
                <el-button type="primary" @click="addUser()">新增</el-button>
                <renwufaqiusercomment
                  v-if="renwufaqiusercomment"
                  ref="renwufaqiusercomment"
                  @submitfy="submitfy"
                ></renwufaqiusercomment>
              </div>
              <el-table
                style="width: 100%; margin-top: 20px"
                :data="dataList"
                border
                v-loading="dataListLoading"
              >
                <el-table-column label="被考核人" header-align="center">
                  <el-table-column
                    type="index"
                    width="80"
                    header-align="center"
                    align="center"
                    label="序号"
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    header-align="center"
                    align="center"
                    label="受约人"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="zhiwu"
                    header-align="center"
                    align="center"
                    min-width="180"
                    label="受约人职务"
                  >
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12">
              <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="任务名称">
                  <el-input v-model="form.taskName"></el-input>
                  <el-button type="primary" @click="selectTask()"
                    >选择任务</el-button
                  >
                </el-form-item>
                <el-form-item label="重要程度">
                  <el-select
                    v-model="form.zycd"
                    placeholder="请选择重要程度"
                    style="width: 100%"
                  >
                    <el-option label="高" value="高"></el-option>
                    <el-option label="较高" value="较高"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="完成难度">
                  <el-select
                    v-model="form.wcnd"
                    placeholder="请选择完成难度"
                    style="width: 100%"
                  >
                    <el-option label="高" value="高"></el-option>
                    <el-option label="较高" value="较高"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="评分人">
                  <el-input v-model="form.pingfenren"></el-input>
                  <el-button type="primary" @click="selectpingfenren()"
                    >选择评分人</el-button
                  >
                  <pingfenrenusercomment
                    v-if="pingfenrenusercomment"
                    ref="pingfenrenusercomment"
                    @submitfypingfenren="submitfypingfenren"
                  ></pingfenrenusercomment>
                </el-form-item>
                <el-form-item label="工作目标/成效">
                  <el-input
                    type="textarea"
                    v-model="form.workTarget"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="savePlus">确定</el-button>
            <el-button @click="dialogVisible = false">返回</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="任务指标库"
          :visible.sync="renwuzhibiaodialogVisible"
          width="80%"
        >
          <renwuzhibiaoTable
            ref="renwuzhibiaoRef"
            @func="getRow"
          ></renwuzhibiaoTable>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addZhibiao">添 加</el-button>
            <el-button @click="renwuzhibiaodialogVisible = false"
              >取 消</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 任务考核-->
      <khrwTable
        v-if="showBlock == 2"
        ref="renwukaohe"
        @fnBackLastPage="fnBackLastPage"
      ></khrwTable>
      <!-- 任务考核查看-->
      <khrwDetailTable
        v-if="showBlock == 3"
        ref="renwukaohedetail"
        @fnBackLastPage="fnBackLastPage"
      ></khrwDetailTable>
    </basic-container>
  </div>
</template>

<script>
import khrwTable from "@/views/hetongrenwu/components/zhongdian-kaoherenwu-table.vue";
import khrwDetailTable from "@/views/hetongrenwu/components/zhongdian-kaoherenwu-table-detail.vue";
import renwuzhibiaoTable from "@/views/hetongrenwu/zhongdianrenwu/zhongdianrwcj/rwfq/renwuzhibiaoTable.vue";
import renwufaqiusercomment from "@/views/hetongrenwu/components/renwufaqiusercomment-select.vue";
import pingfenrenusercomment from "@/views/hetongrenwu/components/pingfenrenusercomment-select.vue";
import {
  saveZdrwRenwufaqiDetailForPlus,
  getRenwuZhibiaoPage,
  getzhongdianrenwuPage,
  delzdrwrenwufaqidetail,
} from "@/api/hetongrenwu/zhongdian/renwuchuangjian";

export default {
  name: "zhongdianrwcj-form",
  components: {
    khrwTable,
    khrwDetailTable,
    renwuzhibiaoTable,
    renwufaqiusercomment,
    pingfenrenusercomment,
  },
  data() {
    return {
      showBlock: "1",
      dataForm: {},
      tabType: "1",
      radio: "1",
      dataList1: [],
      dataList2: [],
      dataList: [],
      dataListLoading: false,
      renwuzhibiaodialogVisible: false,
      dialogVisible: false,
      form: {},
      searchadvanced: true,
      searchheight: "0",
      renwufaqiusercomment: false,
      pingfenrenusercomment: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      renwuId: "",
      renwuName: "",
      khzq: "",
      type: 0,
    };
  },
  watch: {
    radio(value) {
      if (value) {
        if (this.type) {
          this.getDataList(this.type);
        } else {
          this.getDataList(1);
        }
      }
    },
  },
  methods: {
    init(row, type) {
      //type=1为任务发起进来的，2为创建任务进来的
      this.form.renwuName = row.faqiName;
      this.type = type;
      if (type == 1) {
        this.form.renwuId = row.id;
        this.renwuId = row.id;
      } else {
        this.form.renwuId = row.renwuId;
        this.renwuId = row.renwuId;
      }
      this.renwuName = row.faqiName;
      this.khzq = row.rwYxqq + "至" + row.rwYxqz;
      this.getDataList(type);
    },
    getDataList(type) {
      if (this.tabType == 1) {
        this.dataListLoading = true;
        getRenwuZhibiaoPage(
          Object.assign({
            type: this.radio,
            current: this.pageIndex,
            size: this.pageSize,
            renwuId: this.renwuId,
            bkhNumber: this.dataForm.bkhNumber,
            str: type,
            bkhName: this.dataForm.bkhName,
            khrZhiwu: this.dataForm.khrZhiwu,
          })
        ).then((response) => {
          this.dataList1 = response.data.data.records;
          this.totalPage = response.data.data.total;
        });
        this.dataListLoading = false;
      } else {
        this.dataListLoading = true;
        getzhongdianrenwuPage(
          Object.assign({
            type: this.radio,
            current: this.pageIndex,
            size: this.pageSize,
            renwuId: this.renwuId,
            str: type,
            bkhName: this.dataForm.bkhName,
            khrZhiwu: this.dataForm.khrZhiwu,
          })
        ).then((response) => {
          this.dataList2 = response.data.data.records;
          this.totalPage = response.data.data.total;
        });
        this.dataListLoading = false;
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList(this.type);
    },
    fanhui() {
      this.$emit("zdrwcjC", "返回");
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList(this.type);
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
      this.form.renwuId = this.renwuId;
      this.form.renwuName = this.renwuName;
    },
    del(id) {
      this.$confirm("是否确认删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delzdrwrenwufaqidetail(id);
        })
        .then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList(this.type);
        });
    },
    //增加人员
    addUser() {
      this.renwufaqiusercomment = true;
      this.$nextTick(() => {
        this.$refs.renwufaqiusercomment.init("12");
      });
    },
    selectpingfenren() {
      this.pingfenrenusercomment = true;
      this.$nextTick(() => {
        this.$refs.pingfenrenusercomment.init("12");
      });
    },
    submitfy(data) {
      this.dataList = [];
      for (var i = 0; i < data.tableDataUser.length; i++) {
        let objUser = {};
        objUser["id"] = data.tableDataUser[i].userId;
        objUser["name"] = data.tableDataUser[i].userName;
        objUser["zhiwu"] = data.tableDataUser[i].userZw;
        this.dataList.push(objUser);
      }
    },
    submitfypingfenren(data) {
      this.form.pingfenren = data.tableDataUser[0].userName;
      this.form.pingfenrenId = data.tableDataUser[0].userId;
      this.$forceUpdate();
    },
    selectTask() {
      this.renwuzhibiaodialogVisible = true;
      this.$nextTick(() => {
        this.$refs.renwuzhibiaoRef.getDataList();
      });
    },
    addZhibiao() {
      this.$refs.renwuzhibiaoRef.saveZhibiao(1);
    },
    getRow(rows) {
      //console.log(rows[0])
      this.form.taskName = rows[0].taskName;
      this.form.dataProviderId = rows[0].departId;
      this.form.dataProvider = rows[0].departName;
      this.form.weightset = rows[0].weightset;
      this.form.providerId = rows[0].createUserId;
      this.form.providerName = rows[0].createUserName;
      this.renwuzhibiaodialogVisible = false;
    },
    savePlus() {
      this.form.bkhjson = JSON.stringify(this.dataList);
      saveZdrwRenwufaqiDetailForPlus(this.form).then((res) => {
        this.dialogVisible = false;
        this.getDataList(this.type);
      });
    },
    changeRadio() {
      this.getDataList(this.type);
    },
    //新增和查看(打开任务考核)
    fnOpenRenKaoHe() {
      this.showBlock = 2;
      this.$nextTick(() => {
        this.$refs.renwukaohe.init(this.renwuId, this.renwuName, this.type);
      });
    },
    fnOpenRenKaoHeForEdit(row) {
      this.showBlock = 3;
      this.$nextTick(() => {
        this.$refs.renwukaohedetail.init(
          row,
          this.renwuId,
          this.renwuName,
          this.type,
          this.khzq
        );
      });
    },
    //任务考核返回数据
    fnBackLastPage(data) {
      if (data == "返回原页面") {
        this.showBlock = 1;
        this.getDataList(this.type);
      }
    },
  },
};
</script>

<style>
</style>
